import * as React from 'react'

// 以下组件是可单独抽离放入containers容器文件夹
import { connect } from 'react-redux'
import { toggleTodo } from '../reduxConfig/actions' // 引入需要使用的actions动作
import { VisibilityFilters } from '../reduxConfig/actions' // 这是常量动作、全部显示之类名称

/**定义组件props */
export interface Props {
  todos
  toggleTodo
}
class TodoList extends React.Component<Props, object> {
  constructor(props) {
    super(props);
  }
  render() {// 这是组件渲染的内容
    return (
      <ul>
        {this.props.todos.map(todo =>
          <li key={todo.id}
            onClick={() => this.props.toggleTodo(todo.id)}
            style={{
              textDecoration: todo.completed ? 'line-through' : 'none'
            }}
          >
            {/* 用户输入框输入的内容.显示到list列表这里 */}
            {todo.text}
          </li>
        )}
      </ul>
    );
  }
}

// 容器文件内的文件，可放一起
// 这是一个封装的过滤函数，供下面使用
const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    // 根据不同的常量名称，显示不同的信息数据，第一个默认全部
    case VisibilityFilters.SHOW_ALL:
      return todos
    // 正常触发挂载上面的常量，没有触发第二个过滤方法
    case VisibilityFilters.SHOW_COMPLETED:
      return todos.filter(t => t.completed) // 改变里面的completed的值
    case VisibilityFilters.SHOW_ACTIVE:
      return todos.filter(t => !t.completed)
    default:
      throw new Error('Unknown filter: ' + filter)
  }
}
// 这是核心干活的二个函数
// 1、把所有的state转成props，放入对象里面
const mapStateToProps = state => ({
  // 封装的过滤函数，处理不同动作显示不同的state.todos
  todos: getVisibleTodos(state.todos, state.visibilityFilter)
})
// 2、把所有的actions的dispatch灌进去
const mapDispatchToProps = dispatch => ({ // 外部事件传入的当前id值
  toggleTodo: id => dispatch(toggleTodo(id)) // 触发了action里的toggleTodo动作
  // 触发更新到reducers/todos运作相关处理逻辑
})

// 这是拆成二个文件（可以在组件内完成以上写法）
// 最终 redux连接的时候合并进去，把二个函数和组件todoList合并灌入
export default connect( mapStateToProps, mapDispatchToProps)(TodoList)

